import React from 'react';
import './App.css';

export default class App extends React.Component {
    
    constructor(props){
        super(props)
        this.state = {}
        this.keydown = this.keydown.bind(this)
    }

    componentDidMount(){
        document.addEventListener("keydown",this.keydown)
    }

    componentWillUnmount(){
        document.addEventListener("keydown",this.keydown)
    }
    
    keydown(e){
        console.time('keydown')
        console.dir(e)
        console.timeEnd('keydown')
    }

    render() {
        return (
            <div className="App">
                <div className="heading">
                <h1 className="title">2048</h1>
                <div className="scores-container">
                <div className="score-container">0</div>
                <div className="best-container">0</div>
                </div>
            </div>
            <div className="game-container">
                <div className="game-message"> </div>
        
                <div className="grid-container">
                <div className="grid-row">
                    <div className="grid-cell"></div>
                    <div className="grid-cell"></div>
                    <div className="grid-cell"></div>
                    <div className="grid-cell"></div>
                </div>
                <div className="grid-row">
                    <div className="grid-cell"></div>
                    <div className="grid-cell"></div>
                    <div className="grid-cell"></div>
                    <div className="grid-cell"></div>
                </div>
                <div className="grid-row">
                    <div className="grid-cell"></div>
                    <div className="grid-cell"></div>
                    <div className="grid-cell"></div>
                    <div className="grid-cell"></div>
                </div>
                <div className="grid-row">
                    <div className="grid-cell"></div>
                    <div className="grid-cell"></div>
                    <div className="grid-cell"></div>
                    <div className="grid-cell"></div>
                </div>
                </div>
        
                <div className="tile-container">
                    <div className="tile tile-4 tile-position-1-1"><div className="tile-inner">4</div></div>
                    <div className="tile tile-8 tile-position-1-2"><div className="tile-inner">8</div></div>
                    <div className="tile tile-2 tile-position-1-3 tile-new"><div className="tile-inner">2</div></div>
                    <div className="tile tile-2 tile-position-1-4"><div className="tile-inner">2</div></div>
                    <div className="tile tile-8 tile-position-2-1"><div className="tile-inner">8</div></div>
                    <div className="tile tile-16 tile-position-2-2"><div className="tile-inner">16</div></div>
                    <div className="tile tile-2 tile-position-2-3"><div className="tile-inner">2</div></div>
                    <div className="tile tile-2 tile-position-2-3"><div className="tile-inner">2</div></div>
                    <div className="tile tile-4 tile-position-2-3 tile-merged"><div className="tile-inner">4</div></div>
                    <div className="tile tile-4 tile-position-2-4"><div className="tile-inner">4</div></div>
                    <div className="tile tile-16 tile-position-3-1"><div className="tile-inner">16</div></div>
                    <div className="tile tile-4 tile-position-3-2"><div className="tile-inner">4</div></div>
                    <div className="tile tile-64 tile-position-3-3"><div className="tile-inner">64</div></div>
                    <div className="tile tile-8 tile-position-3-4"><div className="tile-inner">8</div></div>
                    <div className="tile tile-4 tile-position-4-1"><div className="tile-inner">4</div></div>
                    <div className="tile tile-2 tile-position-4-2"><div className="tile-inner">2</div></div>
                    <div className="tile tile-16 tile-position-4-3"><div className="tile-inner">16</div></div>
                    <div className="tile tile-2 tile-position-4-4"><div className="tile-inner">2</div></div></div>
            </div>
          </div>
        )
    }
}
